import React from 'react';
import { Descriptions, Tag, Avatar, Row, Col, Card, Statistic } from 'antd';
import { UserOutlined, CodeOutlined, CheckCircleOutlined } from '@ant-design/icons';
import type { UserProfile } from '@/types/account';
import http from '@/http';
import styles from './BasicInfo.module.css';

interface BasicInfoProps {
  profile: UserProfile | null;
}

const BasicInfo: React.FC<BasicInfoProps> = ({ profile }) => {
  if (!profile) {
    return null;
  }

  return (
    <div className={styles.container}>
      {/* 水墨线条装饰 */}
      <div className={styles.waterInkLines}></div>
      {/* 额外的水墨线条装饰 */}
      <div className={`${styles.waterInkLines} ${styles.waterInkLines2}`}></div>
      <div className={`${styles.waterInkLines} ${styles.waterInkLines3}`}></div>
      
      <Row gutter={[24, 24]}>
        {/* 左侧头像和基础信息 */}
        <Col xs={24} md={8} className={styles.leftColumn}>
          <div className={styles.avatarCard}>
            <Avatar
              size={160}
              src={profile.avatar ? http.getAvatarUrl(profile.avatar) : undefined}
              icon={<UserOutlined />}
              className={styles.avatar}
            />
            <h2 className={styles.username}>{profile.username}</h2>
            <div className={styles.userType}>
              <Tag color={profile.admin_type === 'Regular User' ? 'blue' : 'red'}>
                {profile.admin_type}
              </Tag>
            </div>
            <p className={styles.email}>{profile.email}</p>
          </div>

          <div className={styles.statsSection}>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card className={styles.statCard}>
                  <Statistic 
                    title="提交次数" 
                    value={profile.submission_number} 
                    prefix={<CodeOutlined />} 
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card className={styles.statCard}>
                  <Statistic 
                    title="通过次数" 
                    value={profile.accepted_number} 
                    prefix={<CheckCircleOutlined />} 
                    valueStyle={{ color: '#3f8600' }}
                  />
                </Card>
              </Col>
            </Row>
          </div>
        </Col>

        {/* 右侧详细信息 */}
        <Col xs={24} md={16}>
          <Card title="详细资料" className={styles.infoCard}>
            <Descriptions bordered column={1} className={styles.descriptions} size="middle" labelStyle={{ fontWeight: 'bold' }}>
              <Descriptions.Item label="真实姓名">
                {profile.real_name || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="个人博客">
                {profile.blog ? (
                  <a href={profile.blog} target="_blank" rel="noopener noreferrer" className={styles.link}>
                    {profile.blog}
                  </a>
                ) : (
                  '-'
                )}
              </Descriptions.Item>
              <Descriptions.Item label="心情">
                {profile.mood || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="GitHub">
                {profile.github ? (
                  <a href={profile.github} target="_blank" rel="noopener noreferrer" className={styles.link}>
                    {profile.github}
                  </a>
                ) : (
                  '-'
                )}
              </Descriptions.Item>
              <Descriptions.Item label="学校">
                {profile.school || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="专业">
                {profile.major || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="编程语言">
                {profile.language || '-'}
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default BasicInfo; 